<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-08-30 18:01:59
 * @LastEditors: 贺楠 1071780426@qq.com
 * @LastEditTime: 2024-07-11 16:06:44
 * @FilePath: \zjgxpt\zdgy\src\components\commonPublic\fromLayout.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="commonContent">
    <div
      class="structureTree"
      v-if="treelength"
      :style="{ width: isCollapse ? '50px' : '190px' }"
    >
      <i
        class="el-icon-s-fold toggle-button"
        @click="toggleCollapse"
        v-if="isCollapse == false"
      ></i>
      <i
        class="el-icon-s-unfold toggle-button"
        @click="toggleCollapse"
        v-else
      ></i>
      <tree
        v-if="isCollapse == false"
        :treeData="treeData"
        :checkData="checkData"
        nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick"
        :defaultProps="defaultProps"
      >
      </tree>
      <!-- #1277FF -->
    </div>
    <div
      class="department_right container"
      :style="{ backgroundImage: 'var(--background-image)' }"
    >
      <div
        class="mechanism_nav"
        :style="{ backgroundColor: 'var(--background-text-color)' }"
      >
        <publicForm
          ref="publicForm"
          @yj_searchForm="yj_searchForm"
          lableWidth="110px"
          :formObj="searchObj"
          :formData="getList"
          @selectChange="selectTime"
        >
        </publicForm>
        <!--  -->
      </div>
      <div class="text_table">
        <slot name="tabcom" v-if="treeData.length != 0"> </slot>
      </div>
    </div>
  </div>
</template>
<script>
import tree from "@/components/commonPublic/tree"; //左侧机构树
import publicForm from "@/components/materialDataManage/fromCom.vue"; //弹框form

export default {
  props: {
    companyTreeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    searchObj: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  data() {
    return {
      isCollapse: false,
      getList: {
        fCompanyid: "", //左侧选中组织机构id

        startDates: "", //取样日期开始时间
        endDates: "", //取样日期结束时间
        timeDates: "",
      },
      treelength: false,
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      checkText:null,
      checkData: [],
      treeData: [],
    };
  },
  components: {
    tree,
    publicForm,
  },
  watch: {
    // dialogHeight
    // 监听传过来的config，进行初始化
    companyTreeData: {
      handler(newVal) {
        if (newVal) {
          this.treeData = newVal;
          if (this.treeData.length != 0) {
            if (this.treeData[0].children == undefined) {
              this.treelength = false; //左侧组织机构是否显示
            } else {
              this.treelength = true;
            }
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    // console.log(1111, this.$route.path);
    // if (this.$route.path.includes("materialQualityPage")) {
    //   this.checkText = "yjSmart-largeScreen_treeCheck";
    // }
    this.getDate();
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    selectTime(e) {
      if (e[0] != "" && e[1] != "") {
        this.getList.startDates = e[0]; // 开始时间
        this.getList.endDates = e[1]; // 截至时间
      } else {
        this.getList.startDates = ""; // 开始时间
        this.getList.endDates = ""; // 截至时间
      }
      this.getList.timeDates = [e[0], e[1]];
      this.yj_searchForm(this.getList);
    },
    handleNodeClick(e) {
      this.$emit("handleNodeClick", e);
      // console.log(e);
    },
    getDate() {
      if (JSON.parse(sessionStorage.getItem("yjSmart-largeScreen_treeCheck"))) {
        var id = JSON.parse(
          sessionStorage.getItem("yjSmart-largeScreen_treeCheck")
        );
        this.checkData = [id.fCompanyid];
      }
      if (JSON.parse(sessionStorage.getItem("yjSmart-largeScreen_getList"))) {
        var data = JSON.parse(
          sessionStorage.getItem("yjSmart-largeScreen_getList")
        );
        // this.getList.timeDates = [data.startDates, data.endDates]

        this.getList = {
          fCompanyid: data.fCompanyid, //左侧选中组织机构id

          startDates: data.startDates, //进场开始时间
          endDates: data.endDates, //进场结束时间
          timeDates: [data.startDates, data.endDates],
        };
      } else {
        this.getList.startDates = this.common.getDay(-6); // 开始时间
        this.getList.endDates = this.common.getDay(0); // 截至时间
        this.getList.timeDates = [
          this.getList.startDates,
          this.getList.endDates,
        ];
      }
      // this.yj_searchForm(this.getList);
    },
    yj_searchForm(e) {
      console.log(e);
    },
  },
};
</script>
<style lang="less" scoped>
.commonContent {
  display: flex;
  height: 100%;
}
.TensionExceedHandle {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mechanism_nav {
  display: flex;
  padding-left: 0.24rem;
  height: 0.7rem;
  align-items: center;
  // background: pink !important;
  border-radius: 0px;
}

.mechanism_nav_left {
  width: 50%;
  margin-left: 5px;
}

.mechanism_nav_right {
  height: 100%;
  width: 50%;
  margin-right: 17px;

  .printTable {
    height: 100%;
  }
}
.toggle-button {
  display: block;
  // background-color: #286ed2;
  // border-bottom: 1px solid #7E868E;
  // background-color: #fff;
  color: #a9b0b7;
  font-size: 17px;
  line-height: 24px;
  color: rgba(23, 26, 29, 1);
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  border-bottom: 1px solid rgba(126, 134, 142, 0.12);

  // margin-top: 0.05rem;
}
.container {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.department_right {
  margin-left: 0.08rem;
  border-radius: 0;
}
.mechanism_nav {
  background: transparent;
  border: none;
}

.mouldForm {
  display: flex;
  align-items: center;
}
#fromCom /deep/.el-input__inner {
  background: transparent;
  height: 0.32rem !important;
}
input {
  background: transparent;
}
#fromCom /deep/.el-date-editor {
  color: var(--main-select-color);
  border-color: var(--main-border-color);
}
#fromCom /deep/.el-range-editor--small .el-range-input {
  background: transparent;
}
#fromCom /deep/.el-icon-date:before,
#fromCom /deep/ .el-date-editor .el-range-separator,
#fromCom /deep/.el-range-editor--small .el-range-input,
#fromCom /deep/.el-input__inner::placeholder,
#fromCom /deep/.el-input__inner::placeholder,
#fromCom /deep/.el-input__inner::placeholder,
#fromCom /deep/.el-input__inner::placeholder {
  // rgba(23, 26, 29, 0.40) rgba(18, 119, 255, 1)
  color: var(--main-select-fontIcon-color);
}

#fromCom /deep/ input::-webkit-input-placeholder {
  color: var(--main-select-fontIcon-color);
  font-size: 0.14rem !important;
  line-height: 0.32rem;
}

#fromCom /deep/.el-range-editor--small .el-range-input {
  font-size: 0.14rem;
}
#fromCom /deep/ .el-range-editor--small .el-range-separator {
  line-height: 0.32rem;
  font-size: 0.14rem;
}
</style>
